import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import FolderChind from './folder-child';
import { getFolders } from '../../api/getFolders';
import { findDOMNode } from 'react-dom';
import store from '../../store';


class FolderContainer extends Component{

    componentWillMount(){
        getFolders();
    }

    componentDidMount(){
    }

    showMenu(e){
        e.preventDefault()
        var container = findDOMNode(this);
        var menu = $(this.refs.operation)
        $('#rename-folder').hide();
        $('#delete-folder').hide();
        var evt = e || window.event;
        var rightedge = e.clientX - container.offsetLeft;
        var bottomedge = document.body.clientHeight -e.clientY;

        if(rightedge < menu.width()){
            menu.css('left', e.clientX + 'px')
        }else{
            menu.css('left', e.clientX - menu.width() + 'px')
        }

        if(bottomedge < menu.height()){
            menu.css('top', e.clientY - menu.height() + 'px')
        }else{
            menu.css('top', e.clientY + 'px')
        }

        $('#preview-operation').hide();
        $('#folder-operation').show();
        return false; 
    }

    reName(el){
        el.attr('contenteditable', true);
    }

    newMenu(e){
        e.stopPropagation();
        store.dispatch({
            type: 'NEW_FOLDER',
            newFolder: true
        });
        $('.backcover').show();
        $('#new-folder-error').hide();
        $('#new-folder-input').val('');

    }

    deleteFolder(){
        store.dispatch({
            type: 'DELETE_FOLDER',
            deleteFolder: true
        });
        $('.backcover').show();        
    }

    rename(){
        store.dispatch({
            type: 'RENAME_FOLDER',
            renameFolder: true
        });
        $('.backcover').show();
        $('#rename-folder-input').val('');
    }

    render(){
        var { folderList } = this.props;
        var folderEl = folderList.map((fold, i) =>{
            if (i === 0){
               return <FolderChind name ={fold.name} active="active" key={i} classs="active" id={fold.id}/> 
            }else {
               return <FolderChind name ={fold.name}  active={fold.active}  key={i} id={fold.id}/> 
            }
        });

        var classs = 'new-btn hide'
        if(!folderList || folderList <=0){
            classs = 'new-btn'
        }

        return (
            <section id="folder" onContextMenu = {this.showMenu.bind(this)}>
            <section id="folder-operation" ref="operation">
                <ul>
                    <li id="new-folder" onClick={this.newMenu.bind(this)}><i className="icon-plus"></i>新建</li>
                    <li id="rename-folder" onClick={this.rename.bind(this)}>重命名</li>
                    <li id="delete-folder" onClick={this.deleteFolder.bind(this)}><i className="icon-trash"></i>删除</li>
                </ul>
            </section>
            <div className="title">
                <i className="ic-svg ic-folder-logo"></i>
                我的文件夹
            </div>
            <div id="folder-list">
                <ul>
                    { folderEl }
                </ul>
            </div>
            <div className={classs}  onClick={this.newMenu.bind(this)}>
                <i className="icon-plus"></i>
                <p>新建文件夹</p>
            </div>
        </section>
        )
    }
}

const mapStateToProps  = (state) => {
    return {
        folderList: state.folderReducer.folderList,
        activeFolder: state.folderReducer.activeFolder
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(FolderContainer);